import React from 'react';
import store from '@/store';
import { Form, Input, Button, Row, Col, message } from 'antd';
import { login } from './service';
import { Link, useHistory } from 'ice';
import panda from './images/panda.jpg';

function Login() {
  const history = useHistory();
  const [userState, userDispatchers] = store.useModel('user');
  return (
    <Row style={{ width: '100%' }} justify="center" align="middle">
      <Col span={10} style={{ display: 'flex', justifyContent: 'center', alignItems: 'center' }}>
        <img src={panda} alt="" style={{ width: '80%', maxWidth: 370 }} />
      </Col>
      <Col span={10}>
        <div style={{ fontSize: 25, fontWeight: 550, marginBottom: 50 }}>登录</div>
        <Form
          labelCol={{ span: 6 }}
          wrapperCol={{ span: 18 }}
          initialValues={{ remember: true }}
          autoComplete="off"
          onFinish={async (values) => {
            const res = await login(values);
            localStorage.setItem('token', res.token);
            message.success('登录成功');
            history.push('/home');
            userDispatchers.initUserData({ userName: res.username });
            localStorage.setItem('userName', res.username);
          }}
        >
          <Form.Item
            label=""
            name="credential"
            rules={[
              // {
              //   type: 'email',
              //   message: '请输入正确的邮箱',
              // },
              { required: true, message: '请输入用户名/邮箱' },
            ]}
          >
            <Input placeholder="用户名/邮箱" />
          </Form.Item>
          <Form.Item label="" name="password" rules={[{ required: true, message: '请输入密码' }]}>
            <Input.Password placeholder="密码" />
          </Form.Item>
          <div
            style={{
              display: 'flex',
              alignItems: 'center',
              justifyContent: 'space-between',
              marginBottom: 20,
              width: '75%',
            }}
          >
            <Link style={{ color: '#a9a9a9' }} to="/signIn">
              没有账号？马上注册
            </Link>
            <Link style={{ color: '#a9a9a9' }} to="/forgetCode">
              忘记密码
            </Link>
          </div>

          <Form.Item wrapperCol={{ span: 18 }}>
            <Button type="primary" htmlType="submit" style={{ width: '100%' }}>
              确认
            </Button>
          </Form.Item>
        </Form>
      </Col>
    </Row>
  );
}

export default Login;
